<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>首先先了解一下什么是进程和线程 | Roger</title>
    <meta name="description" content="A VitePress site">
    <link rel="preload stylesheet" href="/docs/assets/style.688cd82e.css" as="style">
    
    <script type="module" src="/docs/assets/app.73a16568.js"></script>
    <link rel="preload" href="/docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/docs/assets/chunks/framework.906ebc88.js">
    <link rel="modulepreload" href="/docs/assets/chunks/theme.df409c6c.js">
    <link rel="modulepreload" href="/docs/assets/pages_browser_Chrome_eventLoop_index.md.5289ad5f.lean.js">
    <link rel="icon" href="favicon.ico">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-255ec12d><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ae3e3f51></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ae3e3f51> Skip to content </a><!--]--><!----><header class="VPNav" data-v-255ec12d data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-0937f67c><div class="container" data-v-0937f67c><div class="title" data-v-0937f67c><div class="VPNavBarTitle has-sidebar" data-v-0937f67c data-v-86d1bed8><a class="title" href="/docs/" data-v-86d1bed8><!--[--><!--]--><!----><!--[-->Roger<!--]--><!--[--><!--[--><!--[--><!--[--><!--]--><!--]--><!--]--><!--]--></a></div></div><div class="content" data-v-0937f67c><div class="curtain" data-v-0937f67c></div><div class="content-body" data-v-0937f67c><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-0937f67c><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-0937f67c data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/frontend/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>前端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/docs/pages/browser/Chrome/eventLoop/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>浏览器</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/interview/Vue/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>面试题</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/source/Vue/render/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>框架源码</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-0937f67c data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-0937f67c data-v-40855f84 data-v-a7b5672a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-a7b5672a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-a7b5672a><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-a7b5672a><div class="VPMenu" data-v-a7b5672a data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-0937f67c data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-255ec12d data-v-5cfd5582><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-5cfd5582><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-5cfd5582><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-5cfd5582>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-5cfd5582 data-v-18201f51><button data-v-18201f51>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-255ec12d data-v-845b8fc6><div class="curtain" data-v-845b8fc6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-845b8fc6><span class="visually-hidden" id="sidebar-aria-label" data-v-845b8fc6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0 collapsible collapsed" data-v-845b8fc6 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h2 class="text" data-v-9b797284>前端</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/frontend/HTML/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>HTML</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/frontend/CSS/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>CSS</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0 collapsible has-active" data-v-845b8fc6 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h2 class="text" data-v-9b797284>浏览器</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/browser/Chrome/eventLoop/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>事件循环</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/browser/Chrome/render/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>渲染原理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0 collapsible collapsed" data-v-845b8fc6 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h2 class="text" data-v-9b797284>源码解析</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><section class="VPSidebarItem level-1 collapsible collapsed" data-v-9b797284 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h3 class="text" data-v-9b797284>Vue</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/render/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>模版渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/lifeCycle/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>生命周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/dataProxy/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>data数据代理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/nextTick/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>nextTick</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/watch/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>watch监听</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed" data-v-9b797284 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h3 class="text" data-v-9b797284>React</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/React/PureComponent/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>PureComponent原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/React/router/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>React路由配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/React/setState/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>setState使用及原理</p><!--]--></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section></div><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0 collapsible collapsed" data-v-845b8fc6 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h2 class="text" data-v-9b797284>面试题</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/interview/Vue/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>Vue</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/interview/HC/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>HTML&CSS</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-255ec12d data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _docs_pages_browser_Chrome_eventLoop_index" data-v-6b87e69f><div><h1 id="首先先了解一下什么是进程和线程" tabindex="-1"><strong>首先先了解一下什么是进程和线程</strong> <a class="header-anchor" href="#首先先了解一下什么是进程和线程" aria-label="Permalink to &quot;**首先先了解一下什么是进程和线程**&quot;">​</a></h1><p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de4cfc54107441769d0bd75d03516c2b~tplv-k3u1fbpfcp-watermark.image?" alt="进程图.png"></p><h2 id="进程" tabindex="-1">进程 <a class="header-anchor" href="#进程" aria-label="Permalink to &quot;进程&quot;">​</a></h2><p>进程简单来说就是，QQ，微信，王者荣耀三个软件，他们都会有独立的进程，有了进程之后就可以开始干活了，并且进程之间是互不干扰的，不会因为 QQ 崩溃了而导致微信无法使用，如果想要通信，需要双方同意才可以传递数据</p><h2 id="线程" tabindex="-1">线程 <a class="header-anchor" href="#线程" aria-label="Permalink to &quot;线程&quot;">​</a></h2><p>线程就好比，你的老板开了一家公司，把你招聘进来干活，那么老板就是进程，而你就是线程。每个进程都至少要有一个线程，不然的话没人干活呀，所以每次开辟一个进程都会自动生成一个对应的线程。如果程序比较多，比较复杂，进程也可以开辟多个线程同时执行代码</p><h3 id="举个例子" tabindex="-1">举个例子 <a class="header-anchor" href="#举个例子" aria-label="Permalink to &quot;举个例子&quot;">​</a></h3><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bd74dc449724d4caddacc7d1caeb85a~tplv-k3u1fbpfcp-watermark.image?" alt="线程图.png"></p><ol><li>你进入王者荣耀就会开辟一个内存空间，生成一个进程</li><li>进程会生成多个线程完成不同的工作</li><li>主线程负责一些比较复杂的逻辑，控制游戏逻辑和渲染</li><li>游戏线程比如移动方向，释放技能的一些监听</li><li>网络线程，你放技能，移动，双方都是同步看到的，这些就是网络线程去完成的</li></ol><h2 id="那么浏览器里面有什么进程和线程呢" tabindex="-1">那么浏览器里面有什么进程和线程呢？ <a class="header-anchor" href="#那么浏览器里面有什么进程和线程呢" aria-label="Permalink to &quot;那么浏览器里面有什么进程和线程呢？&quot;">​</a></h2><p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90d156450f274d3a985973289d59ecf7~tplv-k3u1fbpfcp-watermark.image?" alt="浏览器进程.png"></p><h3 id="_1-浏览器进程" tabindex="-1">1. 浏览器进程 <a class="header-anchor" href="#_1-浏览器进程" aria-label="Permalink to &quot;1. 浏览器进程&quot;">​</a></h3><p>主要负责界⾯显示、⽤户交互、⼦进程管理等。浏览器进程内部会启动多个线程处理不同的任务。</p><h3 id="_2-网络进程" tabindex="-1">2. ⽹络进程 <a class="header-anchor" href="#_2-网络进程" aria-label="Permalink to &quot;2. ⽹络进程&quot;">​</a></h3><p>负责加载⽹络资源。⽹络进程内部会启动多个线程来处理不同的⽹络任务。</p><h3 id="_3-渲染进程" tabindex="-1">3. 渲染进程 <a class="header-anchor" href="#_3-渲染进程" aria-label="Permalink to &quot;3. 渲染进程&quot;">​</a></h3><p>渲染进程启动后，会开启⼀个渲染主线程，主线程负责执⾏ HTML、CSS、JS 代码。默认情况下，浏览器会为每个标签⻚开启⼀个新的渲染进程，以保证不同的标签⻚之间不相互影响。</p><h2 id="渲染主线程是怎么工作的呢" tabindex="-1">渲染主线程是怎么工作的呢？ <a class="header-anchor" href="#渲染主线程是怎么工作的呢" aria-label="Permalink to &quot;渲染主线程是怎么工作的呢？&quot;">​</a></h2><h3 id="渲染主线程就是浏览器中最重要且最繁忙的线程" tabindex="-1">渲染主线程就是浏览器中最重要且最繁忙的线程 <a class="header-anchor" href="#渲染主线程就是浏览器中最重要且最繁忙的线程" aria-label="Permalink to &quot;渲染主线程就是浏览器中最重要且最繁忙的线程&quot;">​</a></h3><ul><li><p>渲染 html</p></li><li><p>解析 css</p></li><li><p>解析 js</p></li><li><p>计算样式</p></li><li><p>布局</p></li><li><p>执行事件处理函数</p></li><li><p>. . . . . .</p><p><strong>浏览器渲染流程详解</strong>： <a href="https://juejin.cn/post/7225516176171728957" target="_blank" rel="noreferrer">https://juejin.cn/post/7225516176171728957</a></p></li></ul><h3 id="负责处理这么多任务-还出现了一个难题如何调度任务" tabindex="-1">负责处理这么多任务，还出现了一个难题如何调度任务？ <a class="header-anchor" href="#负责处理这么多任务-还出现了一个难题如何调度任务" aria-label="Permalink to &quot;负责处理这么多任务，还出现了一个难题如何调度任务？&quot;">​</a></h3><ol><li>当浏览器在执行 js 代码的时候，用户点击了按钮，那么是继续执行 js 代码还是执行点击后的逻辑？</li><li>当计时器时间到了，恰巧用户又点了一下按钮，那么先执行定时器还是点击后的逻辑呢？</li></ol><h2 id="event-loop-事件循环" tabindex="-1">event loop （事件循环） <a class="header-anchor" href="#event-loop-事件循环" aria-label="Permalink to &quot;event loop （事件循环）&quot;">​</a></h2><p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e04ece4dcbf4755be3278e105b3ed43~tplv-k3u1fbpfcp-watermark.image?" alt="事件循环.png"></p><ol><li>渲染主线程会开启一个无限循环，每次取出消息队列中第一个任务执行，直到消息队列为空</li><li>当有其他任务（定时器的回调，点击事件的函数）则追加到消息队列的末尾，依次执行</li></ol><h2 id="什么是异步呢" tabindex="-1">什么是异步呢？ <a class="header-anchor" href="#什么是异步呢" aria-label="Permalink to &quot;什么是异步呢？&quot;">​</a></h2><h3 id="我们平时在写代码中也会经常接触到一些无法立即执行的任务" tabindex="-1">我们平时在写代码中也会经常接触到一些无法立即执行的任务 <a class="header-anchor" href="#我们平时在写代码中也会经常接触到一些无法立即执行的任务" aria-label="Permalink to &quot;我们平时在写代码中也会经常接触到一些无法立即执行的任务&quot;">​</a></h3><ol><li>定时器 （<strong>setTimeout, setInterval</strong>）</li><li>网络请求 ajax （<strong>XHR, Fetch</strong>）</li><li>绑定点击事件 （<strong>onclick, addEventListener</strong>）</li></ol><h3 id="因为-js-是一门单线程语言-如果渲染主线程等这些代码执行完再执行下一个任务-渲染主线程长期阻塞-将会导致整个页面卡死-用户体验极差" tabindex="-1">因为 js 是一门单线程语言，如果渲染主线程等这些代码执行完再执行下一个任务，渲染主线程长期阻塞，将会导致整个页面卡死，用户体验极差 <a class="header-anchor" href="#因为-js-是一门单线程语言-如果渲染主线程等这些代码执行完再执行下一个任务-渲染主线程长期阻塞-将会导致整个页面卡死-用户体验极差" aria-label="Permalink to &quot;因为 js 是一门单线程语言，如果渲染主线程等这些代码执行完再执行下一个任务，渲染主线程长期阻塞，将会导致整个页面卡死，用户体验极差&quot;">​</a></h3><h2 id="无法立即执行代码浏览器如何处理的" tabindex="-1">无法立即执行代码浏览器如何处理的？ <a class="header-anchor" href="#无法立即执行代码浏览器如何处理的" aria-label="Permalink to &quot;无法立即执行代码浏览器如何处理的？&quot;">​</a></h2><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21fd0e7cd17648efa5c65ea64766c6c4~tplv-k3u1fbpfcp-watermark.image?" alt="异步执行.png"></p><ol><li>浏览器使用了异步来解决这个问题</li><li>当执行 js 时，渲染主线程遇到了一个定时器，那么会交给一个计时线程，当时间到了，会生成一个任务，追加到消息队列的末尾，等待渲染主线程的调用，如果有多个异步代码，也是使用相同的步骤去执行</li><li>使⽤异步的⽅式，渲染主线程永不阻塞</li></ol><h2 id="那么异步任务有优先级吗" tabindex="-1">那么异步任务有优先级吗？ <a class="header-anchor" href="#那么异步任务有优先级吗" aria-label="Permalink to &quot;那么异步任务有优先级吗？&quot;">​</a></h2><ol><li>任务是没有优先级的，在消息队列中先进先出</li><li>但消息队列中是有优先级的</li><li>在 chrome 中至少包含以下队列</li></ol><ul><li>延时队列：⽤于存放计时器到达后的回调任务，优先级「中」</li><li>交互队列：⽤于存放⽤户操作后产⽣的事件处理任务，优先级「⾼」</li><li>微队列：⽤户存放需要最快执⾏的任务，优先级「最⾼」</li></ul><h3 id="微队列" tabindex="-1">微队列 <a class="header-anchor" href="#微队列" aria-label="Permalink to &quot;微队列&quot;">​</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#6A737D;">// 立即把回调函数添加到微队列中</span></span>
<span class="line"><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">.resolve.</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">(回调函数)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="交互队列" tabindex="-1">交互队列 <a class="header-anchor" href="#交互队列" aria-label="Permalink to &quot;交互队列&quot;">​</a></h3><p>跟用户交互的事件就会进入交互队列</p><ul><li>鼠标点击事件</li><li>键盘事件</li><li>窗口大小改变</li><li>. . . . . .</li></ul><h3 id="延迟队列" tabindex="-1">延迟队列 <a class="header-anchor" href="#延迟队列" aria-label="Permalink to &quot;延迟队列&quot;">​</a></h3><ul><li>setTimeout</li><li>setInterval</li></ul></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-37656e44><!--[--><!--]--><!----><nav class="prev-next" data-v-37656e44><div class="pager" data-v-37656e44><a class="pager-link prev" href="/docs/pages/frontend/CSS/" data-v-37656e44><span class="desc" data-v-37656e44>Previous page</span><span class="title" data-v-37656e44>CSS</span></a></div><div class="pager" data-v-37656e44><a class="pager-link next" href="/docs/pages/browser/Chrome/render/" data-v-37656e44><span class="desc" data-v-37656e44>Next page</span><span class="title" data-v-37656e44>渲染原理</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"pages_browser_chrome_eventloop_index.md\":\"5289ad5f\",\"pages_frontend_css_index.md\":\"33d7f8f0\",\"pages_frontend_js_index.md\":\"071be8ee\",\"pages_source_vue_dataproxy_index.md\":\"2190e5bb\",\"pages_source_react_router_index.md\":\"aee956e0\",\"pages_frontend_html_index.md\":\"d07d2697\",\"pages_frontend_index.md\":\"9602a34e\",\"pages_source_vue_render_index.md\":\"82ef8cd2\",\"index.md\":\"f1fd9f38\",\"pages_source_vue_lifecycle_index.md\":\"e821fde5\",\"pages_source_vue_nexttick_index.md\":\"77c4fcb8\",\"pages_source_react_setstate_index.md\":\"79ab1da8\",\"pages_browser_chrome_render_index.md\":\"ef66fcb1\",\"pages_source_vue_watch_index.md\":\"07309914\",\"pages_source_react_purecomponent_index.md\":\"1489604b\",\"pages_interview_hc_index.md\":\"50eee13c\",\"pages_interview_vue_index.md\":\"26456aa4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"Roger\",\"description\":\"A VitePress site\",\"base\":\"/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端\",\"link\":\"/pages/frontend/\"},{\"text\":\"浏览器\",\"link\":\"/pages/browser/Chrome/eventLoop/\"},{\"text\":\"面试题\",\"link\":\"/pages/interview/Vue/\"},{\"text\":\"框架源码\",\"link\":\"/pages/source/Vue/render/\"}],\"sidebar\":[{\"text\":\"前端\",\"collapsed\":true,\"items\":[{\"text\":\"HTML\",\"link\":\"/pages/frontend/HTML/\"},{\"text\":\"CSS\",\"link\":\"/pages/frontend/CSS/\"}]},{\"text\":\"浏览器\",\"collapsed\":true,\"items\":[{\"text\":\"事件循环\",\"link\":\"/pages/browser/Chrome/eventLoop/\"},{\"text\":\"渲染原理\",\"link\":\"/pages/browser/Chrome/render/\"}]},{\"text\":\"源码解析\",\"collapsed\":true,\"items\":[{\"text\":\"Vue\",\"collapsed\":true,\"items\":[{\"text\":\"模版渲染\",\"link\":\"/pages/source/Vue/render/\"},{\"text\":\"生命周期\",\"link\":\"/pages/source/Vue/lifeCycle/\"},{\"text\":\"data数据代理\",\"link\":\"/pages/source/Vue/dataProxy/\"},{\"text\":\"nextTick\",\"link\":\"/pages/source/Vue/nextTick/\"},{\"text\":\"watch监听\",\"link\":\"/pages/source/Vue/watch/\"}]},{\"text\":\"React\",\"collapsed\":true,\"items\":[{\"text\":\"PureComponent原理\",\"link\":\"/pages/source/React/PureComponent/\"},{\"text\":\"React路由配置\",\"link\":\"/pages/source/React/router/\"},{\"text\":\"setState使用及原理\",\"link\":\"/pages/source/React/setState/\"}]}]},{\"text\":\"面试题\",\"collapsed\":true,\"items\":[{\"text\":\"Vue\",\"link\":\"/pages/interview/Vue/\"},{\"text\":\"HTML&CSS\",\"link\":\"/pages/interview/HC/\"}]}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>